<template>
	<view class="content">	
		<!-- 	<view class="pageDate">
				{{pageDate}}
			</view> -->
			<view class="bg-top">
				<img src="@/static/picture/banner_tousu_new1.png" style="width: 100%;" alt="">
			</view>
				<img src="@/static/picture/pic_title_tousu2-1.png" class="pic_title_tousu1" alt="">
			<view class="mapBox">
				
				
			<!-- 	<view style="width:710upx; height:450upx">
					<view style="width:710upx; height:430upx" ><l-echart ref="echartsmap"></l-echart></view>
				</view> -->
				<view class="mapBoxInfo" >
					<view class="mapBoxInfo_main_box" style="margin-top: 20upx;">
						<view class="mapBoxInfo_main">
							<view class="mapBoxInfo_Title">
								集团红橙黄投诉预警数量
							</view>
						</view>
						<view class="mapBoxInfo_bom">
							<view class="mapBoxInfo_Num">
								<span style="font-weight: bold;font-size: 36upx;color: #2654B0;margin-right: 10rpx;">{{exceData.TohJtNum}}</span>起
							</view>
							<img src="@/static/images/jiantou.png" class="icon_jiantou" alt="">
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_red.png" class="icon_warm" alt="">
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #FF4D4D;height: 40rpx;">{{exceData.TohJtRedNum}}</span>
							</view>
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_orange.png" class="icon_warm" alt="">
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #F37A00;height: 40rpx;">{{exceData.TohJtOrgNum}}</span>
							</view>
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_yellow.png" class="icon_warm" alt="">
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #E3BD23;height: 40rpx;">{{exceData.TohJtYellowNum}}</span>
							</view>
						</view>
					</view>
					<view class="mapBoxInfo_main_box" style="margin-top: 20upx;">
						<view class="mapBoxInfo_main">
							<view class="mapBoxInfo_Title">
								地市红橙黄投诉预警数量
							</view>
						</view>
						<view class="mapBoxInfo_bom">
							<view class="mapBoxInfo_Num">
								
								<span style="font-weight: bold;font-size: 36upx;color: #2654B0;margin-right: 10rpx;">{{exceData.TohSnNum}}</span>起
							</view>
							<img src="@/static/images/jiantou.png" class="icon_jiantou" alt="">
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_red.png" class="icon_warm" alt="">
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #FF4D4D;height: 40rpx;">{{exceData.TohSnRedNum}}</span>
							</view>
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_orange.png" class="icon_warm" alt="">
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #F37A00;height: 40rpx;">{{exceData.TohSnOrgNum}}</span>
							</view>
							<view class="mapBoxInfo_bom_view">
								<img src="@/static/picture/icon_warm_yellow.png" class="icon_warm" alt="">
								
								<span style="font-weight: bold;font-size: 36upx;color: #000000;margin-right: 10rpx;color: #E3BD23;height: 40rpx;">{{exceData.TohSnYellowNum}}</span>
							</view>
						</view>
					</view>
				
				</view>
					<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50upx;" alt="">
				<view class="proportion1">
					<view class="proportion1-item">
						<l-echart ref="chartRef1" style="width:230rpx; height:180rpx"></l-echart>
						<view class="font">总投诉量</view>
					</view>
					<view class="proportion1-item">
						<l-echart ref="chartRef2" style="width:230rpx; height:180rpx"></l-echart>
						<view class="font">家宽投诉在途超时量</view>
					</view>
					<view class="proportion1-item">
						<l-echart ref="chartRef3" style="width:230rpx; height:180rpx"></l-echart>
						<view class="font">家宽重复报障量</view>
					</view>
				</view>
			
			<!-- 	<view style="width:710upx; height:450upx">
					<view style="width:710upx; height:430upx" ><l-echart ref="echartsmap2"></l-echart></view>
				</view> -->
			</view>
			<view class="listBox">
				<img src="@/static/images/pic_title_tousu5.png" class="pic_title_tousu2" alt="">
				<view class="mainNr">
					<view class="mainBox" v-for="(item, index) in datalsBom" :key="index">
						<view class="felxBox">
							<view class="mainBox_left">
								<img src="@/static/picture/icon1.png" style="width: 31upx;height: 36upx;" alt="">
							</view>
							<view class="mainBox_right">
								<view class="mainBox_right_title">
									{{item.Title}}
								</view>
								<view class="mainBox_right_date">
									发生时间：<span style="color: #000000;">{{item.HappenTime}}</span>
								</view>
							<!-- 	<view class="mainBox_right_sf">
									恢复时间：<span style="color: #000000;">{{item.RecoverTime ? item.RecoverTime : '未恢复'}}</span>
								</view> -->
								<view class="mainBox_right_dq">
									预警正文：<span style="color: #000000;">{{item.City}}</span>
								</view>
							</view>
						</view>
						<view class="mainBox_bom">
							<view class="mainBox_bom_nav">
								投诉量：<span class="mainBox_bom_nav_nr">{{item.ComplainNum}}</span>
							</view>
							<view class="mainBox_bom_nav">
								投诉增幅：<span class="mainBox_bom_nav_nr">{{item.ComplainRate}}%</span>
							</view>
							<view class="mainBox_bom_nav">
								投诉增量：<span class="mainBox_bom_nav_nr">{{item.ComplainaddNum}}</span>
							</view>
						</view>
						<view class="dw_view_yujing" :style="item.Grade == '红色预警' ? 'color: #FF4D4D;background: #FFEDED' : item.Grade == '橙色预警' ? 'color: #F37A00;background: #FEF1E5' : 'color: #B49413;background: #F7F4E7'">
							{{item.Grade}}
						</view>
						<!-- <view class="dw_view_top" @click="show = true" v-if="item.status2 == 1">
							top信息<view class="sjx"></view>
						</view> -->
					</view>
					<view class="mainBox" v-if="datalsBom.length == 0">
						无
					</view>
				</view>
				<view>
					<u-popup v-model="show" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#fff">
						<view class="popupBox">
							<view class="titleView">top信息</view>
							<view class="boxNr">
								<view class="nrTitle">
									集中投诉 TOP3 
								</view>
								<view class="subTitleNr" >
									<view v-for="(item,index) in popupList" :key="index">
											<span style="color: #5F6475;font-weight: bold;margin-right: 10upx;">TOP{{index+1}}:</span> {{item.sub}}
									</view>
								</view>
								<view class="nrTitle">
									集中投诉 TOP3 
								</view>
								<view class="subTitleNr" >
									<view v-for="(item,index) in popupList" :key="index">
											<span style="color: #5F6475;font-weight: bold;margin-right: 10upx;">TOP{{index+1}}:</span> {{item.sub}}
									</view>
								</view>
							</view>
						</view>
					</u-popup>
					<u-toast ref="uToast"  class="custom-toast"/>
				</view>
			</view>
	</view>
</template>
<script module="echarts" lang="renderjs">
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
const jsonData = require('static/map/hubei.json');
 export default {
	 watch : {
	 	// 监听路由变化
	 	'$route'(to, from) {
	 	  if (to.path === '/pagesJK/complaintPage/index') {
	 			this.initPage()
	 	  }    
	 	}
	 },
	 data() {
	 	return {
	 		show: false,
			popupList: [
				{
					sub: '网络无法连接 43 件(占比 34.96%)'
				},
				{
					sub: 'LOS 红灯无法上网 41 件(占比 33.33%)'
				},
				{
					sub: '光猫掉电 10 件(占比 8.13%)。'
				},
			],
			datalsTop: {},
			datalsBom: {},
			jiakeData: {},
			arr: [],
			pageDate: '',
			exceData: {}
		};
	 },
  mounted() {
	this.initPage()
	 // 获取当前时间
		const today = new Date();
		this.pageDate =  this.getPreviousDay2(this.formatDate(today)).toISOString().split('T')[0]
	 },
	 methods: {
		//当前日期的前一天
		getPreviousDay2(dateString) {
			const date = new Date(dateString);
			date.setDate(date.getDate() - 1);
			return date;
		},
		formatDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
	  initPage(){
		  this.getDataTop()
		  this.getexecData()
		  this.getjiakeData()
		  this.getComplaintListData()
		
	  },
	  //首页-重点关注
	  async getexecData() {
	  	let	data = await this.$api.getexecData(); 
	  	// console.log('首页-重点关注res',data)
	  	if (data.Code == 200) {
	  		this.exceData = data.Data
	  	} else {
	  		uni.showToast({
	  			title: data.Message,
	  			icon: 'none',
	  			duration: 5000,
	  			mask: true,
	  		});
	  	}		
	  },
	  async init(){
		  const progressData1 = this.datalsTop.TohNum;
		  // 仪表盘 百分比
		  let option3 = {
		  	series: [{
		  		type: 'gauge',
		  		min: 0, 
		  		max: progressData1 == 0 ? 1 : progressData1,
		  		startAngle: 225,
		  		endAngle: -45,
		  		center: ['50%', '50%'],
		  		radius: '100%',
		  		axisLine: {
		  			lineStyle: {
		  				color: [ // 这个是修改仪表盘的进度条颜色的
		  					[1, '#E3DBD9'],
		  				]
		  			}
		  		},
		  		itemStyle: {
		  			color: '#2654B0', //颜色
		  		},
		  		axisLabel: { // 坐标轴小标记
					show: false,
		  			textStyle: { // 属性lineStyle控制线条样式
		  				color: '#fff',
		  				fontSize: 0, //改变仪表盘内刻度数字的大小
		  				shadowColor: '#fff',
		  			} //默认透明        
		  		},
		  		progress: {
		  			show: true, //是否显示进度条
		  			roundCap: true, //是否在两端显示成圆形
		  			width: 10, //进度条宽度
		  			color: ''
		  		},
		  		axisTick: {
		  			//刻度样式
		  			distance: 3, //刻度线距仪表盘的距离
		  			length: 5, //刻度线长度
		  			lineStyle: {
		  				color: '#ebebeb',
		  				width: 1 //刻度线线宽
		  			}
		  		},
		  		splitLine: {
		  			distance: 3,
		  			length: 10,
		  			lineStyle: {
		  				color: '#9b9b9b',
		  				width: 2 //刻度线线宽
		  			}
		  		},
		  		detail: {
		  			fontSize: 20,
		  			offsetCenter: [0, 0],
		  			valueAnimation: true,
		  			formatter: function(value) {
		  				return value ;
		  			},
		  			color: '#2654B0'
		  		},
		  		data: [{
		  			value: progressData1,
		  		}],
		  		pointer: {
		  			show: false // 隐藏指针
		  		}
		  	}]
		  };
		  const chart3 = await this.$refs.chartRef1.init(echarts)
		  chart3.setOption(option3);
		 
	  },
	  async init2(){
		  	  const progressData1 = this.datalsTop.TohNum;
	  		  const progressData2 = this.jiakeData.TsztcsNum;
	  		  const progressData3 = this.jiakeData.CfbzNum;
	  		
	  		  // 仪表盘 分数
	  		  let option4 = {
	  		  	series: [{
	  		  		type: 'gauge',
	  				min: 0,
	  				max: progressData1 == 0 ? 1 : progressData1,
	  		  		startAngle: 225,
	  		  		endAngle: -45,
	  		  		center: ['50%', '50%'],
	  		  		radius: '100%',
	  		  		axisLine: {
	  		  			lineStyle: {
	  		  				width: 10,
	  		  				color: [
	  		  					[1, '#e3dbd9']
	  		  				]
	  		  			}
	  		  		},
	  		  		itemStyle: {
	  		  			color: '#5855D6', //颜色
	  		  		},
	  		  		progress: {
	  		  			show: true, //是否显示进度条
	  		  			roundCap: true, //是否在两端显示成圆形
	  		  			width: 10, //进度条宽度
	  		  			color: ''
	  		  		},
	  		  		axisLabel: { // 坐标轴小标记
	  					show: false,
	  		  			textStyle: { // 属性lineStyle控制线条样式
	  		  				color: '#fff',
	  		  				fontSize: 0, //改变仪表盘内刻度数字的大小
	  		  				shadowColor: '#fff',
	  		  			} //默认透明        
	  		  		},
	  		  
	  		  		axisTick: {
	  		  			//刻度样式
	  		  			distance: 3, //刻度线距仪表盘的距离
	  		  			length: 5, //刻度线长度
	  		  			lineStyle: {
	  		  				color: '#ebebeb',
	  		  				width: 1 //刻度线线宽
	  		  			}
	  		  		},
	  		  		splitLine: {
	  		  			distance: 3,
	  		  			length: 10,
	  		  			lineStyle: {
	  		  				color: '#9b9b9b',
	  		  				width: 2 //刻度线线宽
	  		  			}
	  		  		},
	  		  		detail: {
	  		  			fontSize: 20,
	  		  			offsetCenter: [0, 0],
	  		  			valueAnimation: true,
	  		  			formatter: function(value) {
	  		  				return value ;
	  		  			},
	  		  			color: '#5855D6'
	  		  		},
	  		  		data: [{
	  		  			value: progressData2,
	  		  		}],
	  		  		pointer: {
	  		  			show: false // 隐藏指针
	  		  		}
	  		  	}]
	  		  };
	  		  const chart4 = await this.$refs.chartRef2.init(echarts)
	  		  chart4.setOption(option4);
	  		  // 仪表盘 分数
	  		  let option5 = {
	  		  	series: [{
	  		  		type: 'gauge',
	  				min: 0,
	  				max: progressData1 == 0 ? 1 : progressData1,
	  		  		startAngle: 225,
	  		  		endAngle: -45,
	  		  		center: ['50%', '50%'],
	  		  		radius: '100%',
	  		  		axisLine: {
	  		  			lineStyle: {
	  		  				width: 10,
	  		  				color: [
	  		  					[1, '#e3dbd9']
	  		  				]
	  		  			}
	  		  		},
	  		  		itemStyle: {
	  		  			color: '#4EB4D4', //颜色
	  		  		},
	  		  		progress: {
	  		  			show: true, //是否显示进度条
	  		  			roundCap: true, //是否在两端显示成圆形
	  		  			width: 10, //进度条宽度
	  		  			color: ''
	  		  		},
	  		  		axisLabel: { // 坐标轴小标记
	  					show: false,
	  		  			textStyle: { // 属性lineStyle控制线条样式
	  		  				color: '#fff',
	  		  				fontSize: 0, //改变仪表盘内刻度数字的大小
	  		  				shadowColor: '#fff',
	  		  			} //默认透明        
	  		  		},
	  		  
	  		  		axisTick: {
	  		  			//刻度样式
	  		  			distance: 3, //刻度线距仪表盘的距离
	  		  			length: 5, //刻度线长度
	  		  			lineStyle: {
	  		  				color: '#ebebeb',
	  		  				width: 1 //刻度线线宽
	  		  			}
	  		  		},
	  		  		splitLine: {
	  		  			distance: 3,
	  		  			length: 10,
	  		  			lineStyle: {
	  		  				color: '#9b9b9b',
	  		  				width: 2 //刻度线线宽
	  		  			}
	  		  		},
	  		  		detail: {
	  		  			fontSize: 20,
	  		  			offsetCenter: [0, 0],
	  		  			valueAnimation: true,
	  		  			formatter: function(value) {
	  		  				return value ;
	  		  			},
	  		  			color: '#4EB4D4'
	  		  		},
	  		  		data: [{
	  		  			value: progressData3,
	  		  		}],
	  		  		pointer: {
	  		  			show: false // 隐藏指针
	  		  		}
	  		  	}]
	  		  };
	  		  const chart5 = await this.$refs.chartRef3.init(echarts)
	  		  chart5.setOption(option5);
	  },
	async getDataTop() {
	    	let	data = await this.$api.getDataGKTS(); // 概览 - 投诉
	    	// console.log('概览 - 投诉res',data)
	    	if (data.Code == 200) {
	    		this.datalsTop = data.Data
				this.init()
	    	} else {
	    		uni.showToast({
	    			title: data.Message,
	    			icon: 'none',
	    			duration: 5000,
	    			mask: true,
	    		});
	    	}		
	},
	//投诉详情
	async getComplaintListData(){
	  	let params = `?category=TOH`
	  	let data = await this.$api.getComplaintListDataTS(params);
	  	// console.log('投诉 - 投诉详情res',data)
	  	if (data.Code == 200) {
	  		this.datalsBom = data.Data
	  	} else {
	  		uni.showToast({
	  			title: data.Message,
	  			icon: 'none',
	  			duration: 5000,
	  			mask: true,
	  		});
	  	}		
	},
	//家客
	async getjiakeData() {
		let data = await this.$api.getjiakeInfo();
		// console.log('投诉 - 家客res',data)
		if (data.Code == 200) {
			this.jiakeData = data.Data
			this.init2()
		} else {
			uni.showToast({
				title: data.Message,
				icon: 'none',
				duration: 5000,
				mask: true,
			});
		}
	},
  }
 }
</script>


<style lang="scss" scoped>
.content{
	background: #CCE7FF;
	position: relative;
		top: 80rpx;
	padding-bottom: 40rpx;
	min-height: calc(100vh - 200rpx);
}
.pageDate{
	position: absolute;
	top: 200rpx;
	right: 180rpx;
	z-index: 100;
	border-radius: 30rpx;
	color: #2654B0;
	font-size: 28rpx;
	padding: 10rpx 20rpx;
	background-color: rgba(255,255,255,0.5);
}
.pic_title_tousu1{
	width: 337upx;
	height: 110upx;
	position: absolute;
	top: 190upx;
	left: 22upx;
}
.pic_title_tousu2{
	width: 710upx;
	position: absolute;
	top: 190upx;
	left: 22upx;
}
.bg-top{
    width: 750rpx;
}
.mapBox{
	width: 710rpx;
	margin: 0 auto;
	margin-top: -100rpx;
	position: relative;
	background: #FFFFFF;
	box-shadow: 0px 0px 10rpx 1px rgba(218,231,254,0.2);
	border-radius: 16rpx;
	overflow: hidden;
	.mapBoxInfo{
		padding: 20upx 24upx;
		background: url(@/static/images/pic_detail_guzhang_bg1.png) no-repeat;
		background-size: 710rpx;
		.mapBoxInfo_top{
			display: flex;
			align-items: center;
			padding: 0 6upx;
			.mapBoxInfo_top_icon{
				width: 140rpx;
				height: 140rpx;
			}
			.mapBoxInfo_Title{
				height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #fff;
				font-style: normal;
				text-transform: none;
			}
			
			.mapBoxInfo_topTab{
				height: 40upx;
				font-size: 24upx;
				color: #FF4D4D;
				padding: 4upx 10upx;
				background: #FFFFFF;
				border-radius: 8upx;
				border: 1px solid #FF4D4D;
			}
		}
		.mapBoxInfo_Num{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: #2654B0;
			width: 160rpx;
			height: 60rpx;
			background: rgba(10,10,120,0.05);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icon_jiantou{
			width: 36rpx;
			height: 20rpx;
		}
		.mapBoxInfo_main_box{
			width: 664rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: -28upx;
			padding: 14rpx 20upx;
		}
		.mapBoxInfo_main{
			display: flex;
			align-items: center;
			.mapBoxInfo_Title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: #5F6475;
				font-style: normal;
				text-transform: none;
			}
		}
		.mapBoxInfo_bom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 22upx;
			.mapBoxInfo_bom_view{
				width: 114rpx;
				height: 60rpx;
				background: rgba(120,29,10,0.05);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.proportion1 {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		.proportion1-item {
			width: 30%;
			margin-bottom: 40rpx;
		}
	
		.font {
			width: 70%;
			text-align: center;
			margin: 0 auto;
			color: #A7ABBB;
			font-size: 24rpx;
		}
	}
}
.listBox{
	width: 710upx;
	margin: 120upx auto 0;
	position: relative;
	padding-bottom: 80rpx;
	.pic_title_tousu1,.pic_title_tousu2{
		position: absolute;
		top: -48px;
		left: 0px;
	}
}
.icon_warm{
	width: 34upx;
	height: 34upx;
	margin-right: 8upx;
}
.linBox{
	width: 710rpx;
	height: 759rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	position: relative;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 1px rgba(218,231,254,0.2);
	border-radius: 16rpx;
	border: 1px solid #DAE8FE;
}
.lin-title{
	font-size: 16px;
	color: #5F6475;
	display: flex;
	margin: 36upx 42upx 0 42upx;
	justify-content: space-between;
}
.linIcon > img{
	width: 28upx;
	height: 28upx;
	margin-left: 31upx;
}
.echart-title{
	font-size: 16px;
	margin: 36upx 0 0 42upx;
	color: #5F6475;
}
.min-view{
	margin-left: 55upx;
	margin-top: 25upx;
	display: flex;
}
.min-view_nr{
	width: 146upx;
	height: 100upx;
	background: #F4F6F8;
	border-radius: 8upx;
	margin-right: 10upx;
	padding-top: 15upx;
}
.view_nr_num{
	width: 100%;
	height: 37upx;
	font-family: Roboto, Roboto;
	font-weight: bold;
	font-size: 28upx;
	color: #000000;
	line-height: 0px;
	margin-top: 15upx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.view_nr_title{
	width: 100%;
	height: 33upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24upx;
	color: #5F6475;
	line-height: 0px;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.echart-view{
  width: 100%;
  height: 400upx;
  margin-top: 30upx;
}
.mainNr{
	}
	.mainBox{
		width: 710rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 1px rgba(218,231,254,0.2);
		border-radius: 16rpx;
		border: 1px solid #DAE8FE;
		padding: 30upx;
		position: relative;
	}
.felxBox{
	display: flex;
	flex-wrap: wrap;
	.mainBox_left{
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #1B9CFF;
		box-shadow: 0 10upx 5upx 1upx rgba(27,156,255,0.16);
		margin-right: 23upx;
	}
	.mainBox_right{
		width: 550upx;
		.mainBox_right_title{
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 34upx;
			color: #000000;
			line-height: 45upx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.mainBox_right_date,.mainBox_right_sf,.mainBox_right_dq{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: #A7ABBB;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 20upx;
		}
		.mainBox_right_sf,.mainBox_right_dq{
			margin-top: 10upx;
		}
	}
}
.mainBox_bom{
	width: 650upx;
	height: 70upx;
	display: flex;
	justify-content: space-between;
	background: #F4F6F8;
	border-radius: 8upx;
	padding: 0 39rpx;
	margin-top: 10rpx;
	.mainBox_bom_nav{
		font-size: 24upx;
		color: #5F6475
	}
	.mainBox_bom_nav_nr{
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 28upx;
		color: #FF3B2F;
		line-height: 70upx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
}
.dw_view_yujing{
	width: 131upx;
	height: 52upx;
	text-align: center;
	line-height: 52upx;
	border-radius: 16upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24upx;
	position: absolute;
	top: 80upx;
	right: 60upx;
}
.dw_view_top{
	width: 146upx;
	height: 52upx;
	background: #EEF7FF;
	border-radius: 16upx;
	border: 1px solid #D7DEE5;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24upx;
	color: #1B9CFF;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 150upx;
	right: 65upx;
}
.sjx{
     width: 0;
	   height: 0;
	   border-top: 10upx solid transparent;
	   border-left: 15upx solid #1B9CFF;
	   border-bottom: 10upx solid transparent;
	   margin-left: 10upx;

}
.custom-toast{
	text-align: left;
}
.popupBox{
	.titleView{
		width: 100%;
		height: 93upx;
		line-height: 93upx;
		background: #1B9CFF;
		font-family: Segoe UI, Segoe UI;
		font-weight: bold;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		
	}
	.boxNr{
		background: #F7F9FC;
		height: 600upx;
		overflow-y: auto;
	}
	.nrTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: #000000;
		font-style: normal;
		text-transform: none;
		padding: 28upx 30upx;
	
	}
	.subTitleNr{
		width: 573upx;
		height: 178upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 22upx auto;
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 24upx;
		color: #5F6475;
		line-height: 48upx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 25upx 40upx;
	}
}
</style>